<template>
    <div>
        <div class="cont">
            <div class="cont1">
                <!-- <div class="tit1"><img src="../../assets/img/con1.png" alt="">积分TOP榜</div> -->
                <!-- <img class="img1" src="../../assets/img/zanwu.png" alt=""><span>暂无数据</span> -->
                <div class="top1">top1</div>
                <div class="top2">top2</div>
                <div class="top3">top3</div>
                <div class="tit1"><img src="../../assets/img/con1.png" alt="" />积分TOP榜</div>
                <li class="li2" v-for="(value, index) in goods" :key="index">
                    <img class="img1" :src="value.staff_img" alt="" />
                    <div class="conttt">
                        <div class="name11">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：{{ value.staff_name }}</div>
                        <div class="name22">本月积分：{{ value.awarda }}</div>
                        <div class="name33">累计积分：{{ value.history_integral }}</div>
                        <div class="name44">工&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;种：{{ value.bz }}</div>
                    </div>
                </li>
            </div>
            <div class="cont2">
                <div class="cont2-t">
                    <div class="cont2-t1">
                        <div class="tit"><img src="../../assets/img/con2.png" alt="" />历史累计</div>
                        <div id="schart1"><img src="../../assets/img/zanwu.png" alt="" /><span>暂无数据</span></div>
                    </div>
                    <div class="cont2-t2">
                        <div class="tit"><img src="../../assets/img/con3.png" alt="" />隐患统计</div>
                        <div id="schart2"><img src="../../assets/img/zanwu.png" alt="" /><span>暂无数据</span></div>
                    </div>
                </div>
                <div class="cont2-b">
                    <div class="cont2-b2">
                        <div class="tit"><img src="../../assets/img/con5.png" alt="" />安全隐患</div>
                        <div id="schart4"><img src="../../assets/img/zanwu.png" alt="" /><span>暂无数据</span></div>
                    </div>
                    <div class="cont2-b3">
                        <div class="tit"><img src="../../assets/img/con6.png" alt="" />兑换记录</div>
                        <div class="tit-">
                            <div class="tit-1">兑换人</div>
                            <div class="tit-2">兑换时间</div>
                            <div class="tit-3">商品</div>
                        </div>
                        <div class="cell">
                            <div id="schart5" :style="{ marginTop: marginTop + 'px' }">
                                <li class="li1" v-for="(value, index) in realData" :key="index">
                                    <div class="name1">{{ value.staff_name }}</div>
                                    <div class="name2">{{ value.conversion_time }}</div>
                                    <div class="name3">{{ value.commodity_name }}</div>
                                </li>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import echarts from 'echarts';
import Pagination from '@/components/Pagination'; // Secondary package based on el-pagination
import $ from 'jquery';
import waves from '@/directive/waves';
import ajax from '@/utils/myajax';
export default {
    components: { Pagination },
    directives: { waves },

    methods: {
        // 数据循环滚动
        showNotice() {
            this.marginTop -= 1;
            if (this.marginTop < -310) {
                // 滚上去36px后把前两条数据拉下来
                this.realData.push(this.realData[0]);
                this.realData.push(this.realData[1]); // 因为项目要求数据一条白一条黄，所以两条两条循环
                this.realData.shift();
                this.realData.shift();
                this.marginTop = 0;
            }
        }
    },

    data() {
        return {
            marginTop: 0, // 数据的margin-top
            reaData: ['第一条数据', '第二条数据', '第三条数据'],
            timer: '', // 定时器
            realData: [],
            goods: []
        };
    },
    created() {
        this.timer = setInterval(this.showNotice, 100); //100表示间隔时间，数字越大滚得越快
    },
    mounted() {
        var me = this;
        me.section_id = parseInt(localStorage.getItem('section_id'));
        me.station_id = parseInt(localStorage.getItem('station_id'));
        ajax('count_PC/find_riskshow_awarda', { section_id: me.section_id }, function (data) {
            // console.log(data,66666)
            var arr = data;
            for (var i = 0; i < arr.length; i++) {
                // if(arr[i].staff_img!=''){
                // div1.style.backgroundColor='blue';
                arr[i].staff_img = 'http://101.132.154.10:8891/img/download_img?img_url=' + arr[i].staff_img;
                // }
            }
            me.goods = arr;
            // console.log(me.goods,777)
        });
        ajax('conversion/FindConversions', { pageNo: 1, pageSize: 100, section_id: me.section_id }, function (data) {
            console.log(data, 66666);
            me.realData = data.items;
        });
        ajax('count_App/CountRiskshowByRiskId', { section_id: me.section_id, station_id: me.station_id }, function (data) {
            var data0 = data.data;
            var data1 = data0.map((a) => a.risk_name);
            var data2 = JSON.parse(
                JSON.stringify(data0)
                    .replace(/risk_name/g, 'name')
                    .replace(/count/g, 'value')
            );
            // console.log(data1, data2, 1111);
            let myChart4 = echarts.init(document.getElementById('schart4'));
            let options4 = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                color: ['#D75DFF', '#FFA235', '#1FC37F', '#008AFF', '#02B4F7'],
                legend: {
                    textStyle: {
                        color: '#fff',
                        fontWeight: 600
                    },
                    x: 'center', //可设定图例在左、右、居中
                    y: 'top', //可设定图例在上、下、居中
                    padding: [50, 0, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
                    data: data1
                },
                series: [
                    {
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    textStyle: {
                                        fontWeight: 600,
                                        fontSize: 15 //文字的字体大小
                                    },
                                    // position:'inner',
                                    formatter: ' {c} ({d}%)'
                                },
                                labelLine: {
                                    show: true
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    position: 'center',
                                    textStyle: {
                                        fontSize: '17',
                                        fontWeight: 600
                                    }
                                }
                            }
                        },
                        name: '人数',
                        type: 'pie',
                        radius: '40%',
                        center: ['50%', '60%'],
                        selectedMode: 'single',
                        data: data2,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            myChart4.setOption(options4);
            //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
            window.addEventListener('resize', function () {
                // myChart1.resize();
                myChart4.resize();
            });
        });
        ajax('count_App/CountRiskshow', { section_id: me.section_id, station_id: me.station_id }, function (data) {
            var month = data.data2.month;
            var monthTop = data.data2.monthTop;
            var monthTopY = data.data2.monthTopY;
            var monthMid = data.data2.monthMid;
            var monthMidY = data.data2.monthMidY;
            var monthEnd = data.data2.monthEnd;
            var monthEndY = data.data2.monthEndY;
            var month1 = month + '月上旬';
            var month2 = month + '月中旬';
            var month3 = month + '月下旬';
            // console.log(month3,888)

            let myChart2 = echarts.init(document.getElementById('schart2'));
            let options2 = {
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    textStyle: {
                        color: '#fff'
                    },
                    x: 'center', //可设定图例在左、右、居中
                    y: 'top', //可设定图例在上、下、居中
                    padding: [30, 0, 0, 0],
                    data: ['上报隐患', '有效隐患']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '13%',
                    containLabel: true
                },
                xAxis: [
                    {
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#c3dbff', //更改坐标轴文字颜色
                                fontSize: 14 //更改坐标轴文字大小
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#315070' //更改坐标轴颜色
                            }
                        },
                        type: 'category',
                        data: [month1, month2, month3],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: ['#315070'],
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#c3dbff', //更改坐标轴文字颜色
                                fontSize: 14 //更改坐标轴文字大小
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#315070' //更改坐标轴颜色
                            }
                        },
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '上报隐患',
                        type: 'bar',
                        barWidth: '20%',
                        data: [monthTop, monthMid, monthEnd],
                        color: 'rgb(42,170,227)'
                    },
                    {
                        name: '有效隐患',
                        type: 'bar',
                        barWidth: '20%',
                        data: [monthTopY, monthMidY, monthEndY],
                        color: 'rgb(164,25,238)'
                    }
                ]
            };

            myChart2.setOption(options2);
            //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
            window.addEventListener('resize', function () {
                // myChart1.resize();
                myChart2.resize();
            });
        });
        let myChart1 = echarts.init(document.getElementById('schart1'));
        let options1 = {
            title: {
                text: ' '
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                textStyle: {
                    color: '#fff'
                },
                x: 'center', //可设定图例在左、右、居中
                y: 'top', //可设定图例在上、下、居中
                padding: [30, 0, 0, 0],
                data: ['上报', '确认', '积分奖励', '参与人数']
            },

            grid: {
                top: '10%',
                left: '3%',
                right: '8%',
                bottom: '5%',
                containLabel: true
            },
            xAxis: {
                splitLine: { show: false }, //取消网格线
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#c3dbff', //更改坐标轴文字颜色
                        fontSize: 14, //更改坐标轴文字大小
                        fontWeight: 300
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff' //更改坐标轴颜色
                    }
                },
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                splitLine: { show: false }, //取消网格线
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#c3dbff', //更改坐标轴文字颜色
                        fontSize: 14, //更改坐标轴文字大小
                        fontWeight: 600
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff' //更改坐标轴颜色
                    }
                },
                type: 'category',
                data: ['上报', '确认', '积分奖励', '参与人数']
            },
            series: [
                {
                    name: '问题分析',
                    type: 'bar',
                    barWidth: 20, //柱子宽度
                    itemStyle: {
                        //通常情况下：
                        normal: {
                            //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                            color: function (params) {
                                var colorList = [
                                    'rgb(95,229,235)',
                                    'rgb(164,25,238)',
                                    'rgb(164,205,28)',
                                    'rgb(164,205,238)',
                                    'rgb(42,170,227)',
                                    'rgb(125,46,94)',
                                    'rgb(164,205,238)'
                                ];
                                return colorList[params.dataIndex];
                            }
                        },
                        //鼠标悬停时：
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    data: [22, 22, 9, 5]
                }
            ]
        };

        myChart1.setOption(options1);
        //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
        window.addEventListener('resize', function () {
            // myChart1.resize();
            myChart1.resize();
        });
    }
};
</script>
<style scoped>
.name11,
.name22,
.name33,
.name44 {
    margin-top: 10px;
    float: left;
    width: 100%;
    height: 21px;
    font-size: 22px;
    font-family: Source Han Sans CN;
    font-weight: 200;
    color: rgba(255, 255, 255, 1);
    line-height: 34px;
}
.conttt {
    padding-left: 15px;
    margin-top: 60px;
    float: left;
    width: 235px;
    height: 140px;
    /* background: cornflowerblue; */
}
.img1 {
    /* visibility:hidden; */
    margin-left: 20px;
    margin-top: 30px;
    float: left;
    width: 132px;
    height: 170px;
}
.name1,
.name2,
.name3 {
    float: left;
    height: 30px;
    text-align: center;
}
.name1 {
    width: 15%;
}
.name2 {
    width: 25%;
}
.name3 {
    width: 60%;
}
.li2 {
    float: left;
    width: 100%;
    margin-top: 20px;
    list-style: none;
    height: 238px;
    /* background: chocolate; */
    border-bottom: 1px solid #ccc;
}
.li2:last-child {
    border: none;
}
.li1:nth-child(2n-1) {
    list-style: none;
    color: rgba(215, 244, 255, 1);
    font-size: 18px;
    line-height: 40px;
    width: 100%;
    height: 40px;
    background: rgba(12, 127, 215, 1);
}
.li1:nth-child(2n) {
    list-style: none;
    font-size: 18px;
    color: rgba(215, 244, 255, 1);
    line-height: 40px;
    width: 100%;
    height: 40px;
    opacity: 0.7;
    background: rgba(12, 127, 215, 1);
}
.tit,
.tit1 {
    z-index: -999;
    float: left;
    margin-top: 10px;
    width: 94%;
    margin-left: 3%;
    height: 24px;
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(177, 236, 255, 1);
    line-height: 24px;
    /* background: tomato; */
}
.tit1 img {
    float: left;
    width: 20px;
    height: 25px;
    padding: 0 8px;
}
.tit img {
    float: left;
    width: 25px;
    height: 25px;
    padding: 0 8px;
}
.cont {
    margin-top: 30px;
    float: left;
    margin-left: 2%;
    height: 814px;
    width: 96%;
    display: flex;
    justify-content: space-between;
}
.cont1 {
    width: 406px;
    height: 834px;
    background: url(../../assets/img/topbc.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
}
/* .img1{
    display: block;
    margin-top: 305px;
    margin-left: 135px;
    width: 150px;
    height: 150px;
} */
.cont1 span {
    float: left;
    display: block;
    width: 100%;
    height: 20px;
    font-size: 20px;
    /* background: chartreuse; */
    color: aliceblue;
    line-height: 20px;
    text-align: center;
}
.top1 {
    position: absolute;
    top: 75px;
    left: 200px;
    width: 66px;
    height: 18px;
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(241, 199, 73, 1);
    line-height: 34px;
}
.top2 {
    position: absolute;
    top: 330px;
    left: 205px;
    width: 66px;
    height: 18px;
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(241, 199, 73, 1);
    line-height: 34px;
}
.top3 {
    position: absolute;
    top: 596px;
    left: 200px;
    width: 66px;
    height: 18px;
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(241, 199, 73, 1);
    line-height: 34px;
}
.cont2 {
    width: 1358px;
    height: 834px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.cont2-t {
    width: 1358px;
    height: 408px;

    display: flex;
    justify-content: space-between;
}
.cont2-t1 {
    width: 274px;
    height: 418px;
    background: rgba(14, 128, 225, 0.28);
}
#schart1 {
    float: left;
    width: 274px;
    height: 383px;
    /* background: rosybrown; */
}
#schart1 img {
    display: block;
    margin-top: 105px;
    margin-left: 65px;
    width: 150px;
    height: 150px;
}
#schart1 span {
    /* float: left; */
    display: block;
    width: 100%;
    height: 20px;
    font-size: 20px;
    /* background: chartreuse; */
    color: aliceblue;
    line-height: 20px;
    text-align: center;
}
.cont2-t2 {
    width: 1060px;
    height: 418px;
    background: rgba(14, 128, 225, 0.28);
}
#schart2 {
    float: left;
    width: 1060px;
    height: 383px;
    /* background: rosybrown; */
}
#schart2 img {
    display: block;
    margin-top: 105px;
    margin-left: 450px;
    width: 150px;
    height: 150px;
}
#schart2 span {
    /* float: left; */
    display: block;
    width: 100%;
    height: 20px;
    font-size: 20px;
    /* background: chartreuse; */
    color: aliceblue;
    line-height: 20px;
    text-align: center;
}
#schart4 img {
    display: block;
    margin-top: 45px;
    margin-left: 300px;
    width: 150px;
    height: 150px;
}
#schart4 span {
    /* float: left; */
    display: block;
    width: 100%;
    height: 20px;
    font-size: 20px;
    /* background: chartreuse; */
    color: aliceblue;
    line-height: 20px;
    text-align: center;
}
.img2 {
    display: block;
    margin-top: 75px;
    margin-left: 220px;
    width: 150px;
    height: 150px;
}
.cont2-b3 span {
    /* float: left; */
    display: block;
    width: 100%;
    height: 20px;
    font-size: 20px;
    /* background: chartreuse; */
    color: aliceblue;
    line-height: 20px;
    text-align: center;
}
.cont2-b {
    width: 1358px;
    height: 378px;
    display: flex;
    justify-content: space-between;
}
.cont2-b3 {
    width: 590px;
    height: 378px;
    background: rgba(14, 128, 225, 0.28);
}

.cont2-b2 {
    width: 734px;
    height: 378px;
    background: rgba(14, 128, 225, 0.28);
}
.tit- {
    margin-top: 25px;
    margin-bottom: 5px;
    width: 590px;
    background: rgba(12, 127, 215, 0.5);

    float: left;
    height: 29px;
}
.tit-1 {
    width: 15%;
    background: rgba(12, 127, 215, 1);
    float: left;
    height: 29px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(215, 244, 255, 1);
    line-height: 30px;
    text-align: center;
}
.tit-2 {
    width: 25%;
    background: rgba(12, 127, 215, 1);
    float: left;
    height: 29px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(215, 244, 255, 1);
    line-height: 30px;
    text-align: center;
}
.tit-3 {
    text-align: center;
    width: 60%;
    background: rgba(12, 127, 215, 1);
    float: left;
    height: 29px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(215, 244, 255, 1);
    line-height: 30px;
}
#schart4 {
    float: left;
    width: 734px;
    height: 343px;
    z-index: 999;
}
#schart5 {
    float: left;
    width: 590px;
    height: 285px;
}
.cell {
    float: left;
    width: 590px;
    height: 285px;
    overflow: hidden;
}
</style>